<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>详情</title>
    <link rel="stylesheet" href="../css/common.css">
    <style>
        .main{
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }
        .bodyer{
            height: calc(100% - 130px);
            background: #ffffff url("../image/bg2.jpg")no-repeat;
            background-size: contain;
        }
        .header_t{
            border-bottom: 1px solid #3e93ff;
            background: #146ffb;
            /*background: red;*/
            height: 40px;
        }
        .header_b{
            height: 90px;
            width: 100%;
            background: url("../image/bg1.png")no-repeat;
            background-size: cover;
            background-position: center bottom;

        }
        .header_b>div{
            width: 65%;
            height: 100%;
            position: relative;
        }
        .header_b .news{
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(25,102,203,0.9);
            height: 40px;
        }
        .header_b .news>div{
            flex : 1;
        }
        .header_b .news>div>p{
            cursor: pointer;
            width: 100%;
            color: #ffffff;
            text-indent: 50px;
            justify-content: flex-start;
            font-size: 12px;
        }
        .header_b .news>div:nth-of-type(2)>p{
            border-left: 1px solid #ffffff;
        }
        p{
            margin:  0 ;
        }
        body .header_t_c{
            width: 65%;
            height: 100%;
            justify-content: space-between;
            color: #ffffff;
        }
        .header_t_c>div{
            height: 100%;
        }
        .header_t_c ul {
            height: 100%;
        }
        .header_t_c ul li{
            height: 100%;
            padding: 0px 15px;
            box-sizing: border-box;
        }
        .header_t_c ul li span{
            display: flex;
            height: 100%;
            cursor: pointer;
        }
        body .header_t_c ul .ul_active{
            border-bottom: 2px solid #ffffff;
            box-sizing: border-box;
        }
        .photo{
            width: 30px;
            height: 30px;
            background: url("../image/head.png");
            background-size: cover;
            border-radius: 50%;
        }
        .name{
            padding: 0px 10px;
        }
        .quit_btn{
            color: #72afff;
            font-style: normal;
            font-size: 12px;
            height: 100%;
            cursor: pointer;
        }
        .power{
            align-items: flex-start;
            padding-top: 20px;
            box-sizing: border-box;
            width: 65%;
            justify-content: space-between;
            height: 100%;
            /*background: red;*/
        }
        .power_l{
            width: 200px;
            /*background: blue;*/
            height: 100%;
        }
        .power_r{
            box-shadow: 2px 2px 2px #c7c7c7;
            width: calc(100% - 240px);
            background: #ffffff;
            /*height: 100%;*/
            padding: 10px;
            /*box-sizing: border-box;*/
        }
        .search,.browse{
            box-shadow: 2px 2px 2px #c7c7c7;
            background: #fff;
            border-radius: 2px;
            box-sizing: border-box;
            width: 100%;
            /*padding: 10px;*/
        }
        .browse{
            margin-top: 20px;
        }
        .search_i_2{
            display: inline-block;
            border: 2px solid #999999;
        }
        .search_title,.browse_title{
            padding-top: 6px;
            height: 40px;
            justify-content: flex-start;
            border-bottom: 1px solid #efefef;
        }
        .search_i_1{
            margin-left: 10px;
            width: 20px;
            height: 20px;
            background: url("../image/icon_10.png")no-repeat center center;
            background-size: cover;
        }
        .search_text{
            color: #333333;
            margin-left: 10px;
            font-size: 16px;
            font-weight: bold;
        }
        .search ul,.browse ul{
            padding:10px;
            box-sizing: border-box;
        }
        .search li,.browse li{
            cursor: pointer;
            padding: 10px 0px;
            justify-content: flex-start;
        }
        .browse li span{
            color:#949697;
            margin-left: 10px;
            font-size: 12px;
        }
        .search li div{
            font-size: 12px;
        }
        .search li>div:nth-of-type(1){
            width: 50px;
            color: #666666;
        }
        .search li>div:nth-of-type(2){
            color:#949697;
            box-sizing: border-box;
            padding-left: 10px;
            width: calc(100% - 50px);
        }
        .power_r_title{
            padding-top: 20px;
            font-size: 16px;
            text-align: left;
            font-weight: bold;
            line-height: 30px;
        }
        .file{
            font-size: 14px;
            cursor: pointer;
            /*text-align: right;*/
            color: #333333;
            padding: 5px;
        }
        .file_icon{
            width: 31px;
            height: 40px;
        }
        .power_r_content{
            padding: 10px;
        }
        .title_box{
            display: flex;
            justify-content: space-between;
        }
        .title_tool{
            color: #949697;
            font-size: 14px;
        }
        .title_tool >div{
            cursor: pointer;
            padding: 0px 5px;
            margin-left: 10px;
        }
        .title_tool >div>p{
            margin-left: 6px;
        }

        .icon1 {
            width: 14px;
            height: 14px;
            /*background: url(../image/icon_16.png)no-repeat;*/
            /*background-size: cover;*/
            cursor: pointer;
        }
        .icon3{
            width: 11px;
            height: 15px;
            cursor: pointer;
        }
        .icon5{
            width: 14px;
            height: 14px;
            cursor: pointer;
        }

    </style>
</head>
<body>
<div class="main">
    <div class="header">
        <div class="header_t flex">
            <div class="header_t_c flex">
                <div class="flex">动态信息知识库</div>
                <div>
                    <ul class="flex">
                        <li class="flex"><span class="flex home_page">首页</span></li>
                        <li class="flex"><span class="flex knowledge_page">知识库</span></li>
                        <li class="flex"><span class="flex">系统管理</span></li>
                        <!--<li class="flex"><span class="flex">登陆</span></li>-->
                        <li class="flex">
                            <i class="photo"></i><span class="flex name my_page">你好</span><i class="quit_btn flex">退出</i>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="header_b flex"> </div>
    </div>
    <div class="bodyer flex">
        <div class="power flex">
            <div class="power_l">
                <div class="search">
                    <div class="search_title flex">
                        <i class="search_i_1"></i>
                        <span class="search_text">文件属性</span>
                    </div>
                    <div class="search_content">
                        <ul class="search_ul">

                        </ul>
                    </div>
                </div>
                <div class="browse">
                    <div class="browse_title flex">
                        <i class="search_i_1"></i>
                        <span class="search_text">最近浏览</span>
                    </div>
                    <div class="browse_content">
                        <ul class="browse_ul">

                        </ul>
                    </div>
                </div>
            </div>
            <div class="power_r">
                <div class="title_box">
                    <div class="search_text" style="margin-left: 0px">内容详情</div>
                    <div class="flex title_tool">

                    </div>
                </div>
                <div class="power_r_title"></div>
                <div class="power_r_content"></div>
                <div class="power_r_file"></div>
            </div>
        </div>
    </div>
</div>
<script id="item_list_tem3" type="text/x-dot-template">
    {{?it.hasTransfer}}
        {{?it.current==0}}
        <div class="flex title_tool_translate" id_ ={{=it.id}}><i class="icon5" style="background: url(../image/icon_22.png);background-size: cover"></i><p>翻译</p></div>
        {{??}}
        <div class="flex title_tool_translate" id_ ={{=it.id}}><i class="icon5" style="background: url(../image/icon_21.png);background-size: cover"></i><p>翻译</p></div>
        {{?}}
    {{?}}


    {{?it.download}}
    <div class="flex title_tool_down" type = "{{=it.download}}" id_ ={{=it.id}}><i class="icon3" style="background: url(../image/icon_20.png);background-size: cover"></i><p>下载</p></div>
    {{??}}
    <div class="flex title_tool_down" type = "{{=it.download}}" id_ ={{=it.id}}><i class="icon3" style="background: url(../image/icon_13.png);background-size: cover"></i><p>下载</p></div>
    {{?}}

    {{?it.collect}}
    <div class="flex title_tool_collect" type = "{{=it.collect}}" id_ ={{=it.id}}><i class="icon1" style="background: url(../image/icon_16.png);background-size: cover"></i><p>收藏</p></div>
    {{??}}
    <div class="flex title_tool_collect" type = "{{=it.collect}}" id_ ={{=it.id}}><i class="icon1" style="background: url(../image/icon_18.png);background-size: cover"></i><p>收藏</p></div>
    {{?}}
</script>
<script id="item_list_tem" type="text/x-dot-template">
    {{~it:value:index}}
    <li class="flex"><i class="search_i_2"></i><span>{{=value}}</span></li>
    {{~}}
</script>
<script id="item_list_tem2" type="text/x-dot-template">
    <li class="flex"><div>文章标题</div><div>{{=it.title}}</div></li>
    <li class="flex"><div>作者</div><div>{{=it.author}}</div></li>
    <li class="flex"><div>发布时间</div><div>{{=it.pubDate}}</div></li>
    <li class="flex"><div>上传时间</div><div>{{=it.createDate}}</div></li>
    <li class="flex"><div>来源</div><div>{{=it.dataSource}}</div></li>
    <li class="flex"><div>机构</div><div>{{=it.organization}}</div></li>
    <li class="flex"><div>国家</div><div>{{=it.mediaCountry}}</div></li>
    <li class="flex"><div>语言</div><div>{{=it.langName}}</div></li>
    <li class="flex"><div>分类</div><div>{{=it.classifyName}}</div></li>
    <li class="flex"><div>媒体源</div><div>{{=it.organization}}</div></li>
</script>

<script id="item_list_tem1" type="text/x-dot-template">
    {{~it:value:index}}
    <div class="flex" style="justify-content: flex-start">
        {{?value.suffix == "doc"}}
            <div class="file_icon" style="background:url(../image/icon_23.png);background-size: cover"></div>
        {{??value.suffix == "txt"}}
            <div class="file_icon" style="background:url(../image/icon_24.png);background-size: cover"></div>
        {{??value.suffix == "ppt"}}
            <div class="file_icon" style="background:url(../image/icon_25.png);background-size: cover"></div>
        {{??value.suffix == "pdf"}}
            <div class="file_icon" style="background:url(../image/icon_26.png);background-size: cover"></div>
        {{??value.suffix == "xls"}}
            <div class="file_icon" style="background:url(../image/icon_27.png);background-size: cover"></div>
        {{?}}


        <div class="file" id_="{{=value.attachId}}">{{=value.fileName}}</div>
    </div>
    {{~}}
</script>


<script id="item_list_tem4" type="text/x-dot-template">
    {{~it:value:index}}
    <li class="flex"><i class="search_i_2"></i><span class="browser_item" id_="{{=value.id}}">{{=value.title}}</span></li>
    {{~}}
</script>
<script src="../js/jquery.min.js"></script>
<script src="../js/url.js"></script>
<script src="../js/common.js"></script>
<script src="../js/doT.min.js"></script>
<script>
    var docId = '',data_storage = {
        "current" : 0,
        "data":[]
    };
    $(function(){
        render_user();
        if(GetQueryString('id')&&GetQueryString('id')!=""){
            docId = GetQueryString('id');
            get_page_data()
        }
        $('body').on('click','.browser_item',function () {
            var id_ = $(this).attr('id_');
            docId = '46f325c6610040ccb395bd5b15197cdf';
            // docId = id_;
            getDate(docId)
        })

        $('body').on('click','.file',function () {
            var id_ = $(this).attr('id_');
            var $form = $("<form action="+ajax_url.downloadAttachFile+" id='download' class='hidden' method='get'></form>");
            $('body').append($form);
            var $input1 = $("<input name='attachId' type='text'/>");
            $input1.attr("value",id_);
            $("#download").append($input1);
            $form.submit();
            $form.remove();
        })

        $('body').on('click','.title_tool_collect',function(){
            var that = $(this);
            var type = that.attr('type');
            var id_ = that.attr('id_');
            if(type=="true"){
                that.attr({'type':'false'})
                cancelCollect(id_,function(){
                    that.find('i').css({
                        "background":"url(../image/icon_18.png)no-repeat",
                        "background-size":"cover"
                    })
                })
            }else{
                that.attr({'type':'true'})
                saveCollect(id_,function(){
                    that.find('i').css({
                        "background":"url(../image/icon_16.png)no-repeat",
                        "background-size":"cover"
                    })
                })
            }
        });

        $('body').on('click','.title_tool_down',function(){
            var that = $(this);
            var type = that.attr('type');
            var id_ = that.attr('id_');
            if(type=="false"){
                that.attr({'type':'true'})
                downfile(id_)
                that.find('i').css({
                    "background":"url(../image/icon_20.png)no-repeat",
                    "background-size":"cover"
                })
            }
        });

        $('body').on('click','.title_tool_translate',function(){
            var that = $(this);
            var type = that.attr('type');
            var id_ = that.attr('id_');
            console.log(data_storage)
            if(data_storage.current==0){
                if(data_storage.data.length>1){
                    data_storage.current = 1;
                    data_handle(data_storage.data[1])
                }else{
                    getTranslateDoc(id_)
                }
            }else{
                data_storage.current = 0;
                data_handle(data_storage.data[0])
            }
            // getTranslateDoc(id_)
        });

    });

    function getTranslateDoc(id){
        var option = option_structure([
            {
                "method" : "post",
                "url" : ajax_url.getTranslateDoc,
                "data" : {"docId":id}
            }
        ]);
        var back = callback_structure([
            function (res) {
                if(res.hasTransfer){
                    data_storage.current = 1;
                    data_storage.data.push(res.docInfo);
                    data_handle(res.docInfo)
                }else{
                    s_warning('无译文')
                }

            }
        ]);
        pro_all(option,back)
    }

    function data_handle(res) {
        res.current = data_storage.current;
        $('.search_ul').empty()
        if(res.pubDate){
            var ti = res.pubDate.split(' ')[0].replace(/-/g,'/');
            res.pubDate = ti
        }
        if(res.createDate){
            var ti = res.createDate.split(' ')[0].replace(/-/g,'/');
            res.createDate = ti
        }
        doT_render('.search_ul','#item_list_tem2',res);
        $('.title_tool').empty();
        doT_render('.title_tool','#item_list_tem3',res);
        $('.power_r_title').empty().append(res.title)
        if(res.attachments&&res.attachments.length>0){
            res.attachments.map(function(item){
                return item.suffix = getFileType(item.fileName)
            })
            $('.power_r_file').empty()
            doT_render('.power_r_file','#item_list_tem1',res.attachments);
        }
        previewFile_api(res.fileType,res.id)
    }

    function filedata_handle(res){}

    function get_page_data() {
        var option = option_structure([
            {
                "method" : "post",
                "url" : ajax_url.latestBrowserHis,
                "data" : {"pageSize":"4"}
            },
            {
                "method" : "post",
                "url" : ajax_url.getDocInfo,
                "data":{"docId":docId}
            }
        ]);
        var back = callback_structure([
            function (res) {
                judge_data(res,function (data) {
                    doT_render('.browse_ul','#item_list_tem4',data);
                })
            },
            function(res){
                data_storage.data.push(res);
                data_handle(res)
            }
            // data_handle
        ]);
        pro_all(option,back)
    }

    function previewFile_api(doc,id) {
        var option = option_structure([
            {
                "method" : "post",
                "url" : ajax_url.previewFile,
                "data" : {"type":doc,"id":id}
            }
        ]);
        var back = callback_structure([
            previewFile_back
        ]);
        pro_all(option,back)
    }
    
    function previewFile_back(res) {
        if(res&&res.filePath){
            if(res.fileType=="2"){
                $()
                $('.power_r_content').html('<img width="100%" src="'+res.filePath+'">')

            }else{
                $('.power_r_content').html('<iframe style="padding: 20px;box-sizing: border-box;" width="100%" src="'+res.filePath+'" height="800px"></iframe>')
            }

        }

    }

    function getDate(id_) {
        var option = option_structure([
            {
                "method" : "post",
                "url" : ajax_url.getDocInfo,
                "data":{"docId":docId}
            }
        ]);
        var back = callback_structure([
            function(res){
                data_storage.data = [];
                data_storage.data.push(res);
                data_handle(res)
            }
        ]);
        pro_all(option,back)
    }
</script>
</body>
</html>